<template>
	<view class="love-letter-page">
		<!-- 雪花 Canvas 背景 -->
		<canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>

		<!-- 标题 -->
		<view class="header">
			💌 我收到的
		</view>

		<!-- 下拉刷新内容 -->
		<scroll-view scroll-y class="letters-list" refresher-enabled :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore">
			<view style="padding: 25rpx;">
				<view v-for="(letter, index) in loveLetters" :key="index" class="letter-card">
					<view class="letter-header">
						<text class="sender-name">{{ letter.nickname }}</text>
						<text class="send-time">{{ letter.sendData.create_time }}</text>
					</view>
					<view class="letter-content">
						{{ letter.sendData.content }}
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 去发情书按钮 -->
		<view class="send-btn" @click="goToSendLove">
			去发情书 ❤️
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				refreshing: false,
				loveLetters: [],
				page:{
					page:1,
					limit:20
				},
				total:0
			};
		},
		onReady() {
			this.initSnowEffect();
		},
		onLoad() {
			this.getLoveLetter()
		},
		methods: {
			async getLoveLetter(){
				const res = await this.$api.get('/LoveLetter/receivedList',this.page,true)
				if(res.data.code === 200) {
					this.loveLetters = res.data.data.list
					this.total = res.data.data.total
					this.refreshing = false
				}
			},
			onLoadMore(){
				if (this.refreshing) return;
				this.pageNum++;
				this.refreshing = true;
				this.getLoveLetter();
			},
			// 模拟雪花特效
			initSnowEffect() {
				const sys = uni.getSystemInfoSync();
				const W = sys.windowWidth;
				const H = sys.windowHeight;
				const ctx = uni.createCanvasContext('snow-canvas', this);

				const snowflakes = [];
				for (let i = 0; i < 40; i++) {
					snowflakes.push({
						x: Math.random() * W,
						y: Math.random() * H,
						r: Math.random() * 3 + 1,
						d: Math.random() * 2 + 1
					});
				}

				const draw = () => {
					ctx.clearRect(0, 0, W, H);
					ctx.setFillStyle('rgba(255,255,255,0.9)');
					ctx.beginPath();
					snowflakes.forEach(flake => {
						ctx.moveTo(flake.x, flake.y);
						ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2);
					});
					ctx.fill();
					snowflakes.forEach(flake => {
						flake.y += flake.d;
						flake.x += Math.sin(flake.y / 20) * 0.8;
						if (flake.y > H) {
							flake.y = 0;
							flake.x = Math.random() * W;
						}
					});
					ctx.draw();
					// #ifdef H5
					requestAnimationFrame(draw);
					// #endif
					// #ifdef MP-WEIXIN
					setTimeout(draw, 1000 / 60);
					// #endif
				};

				draw();
			},

			// 去发布情书页面
			goToSendLove() {
				uni.navigateTo({
					url: '/pages/send-love/send-love' // 替换成你的发布页面路径
				});
			},

			// 下拉刷新模拟
			onRefresh() {
				this.refreshing = true;
				this.page.page = 1
				this.getLoveLetter()
			}
		}
	};
</script>

<style scoped>
	.love-letter-page {
		position: relative;
		width: 100%;
		height: 100vh;
		/* background: linear-gradient(to bottom right, #fdfbfb, #ebedee); */
		background: linear-gradient(to bottom right, #fefcea, #f1daff);
		overflow: hidden;
	}

	.snow-canvas {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
	}

	.header {
		position: relative;
		z-index: 1;
		font-size: 42rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		color: #f06292;
		text-shadow: 0 0 10rpx #fff;
	}

	.letters-list {
		position: relative;
		z-index: 1;
		height: calc(100vh - 120rpx);
		/* padding: 20rpx; */
	}

	.letter-card {
		background: rgba(255, 255, 255, 0.88);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(6rpx);
		animation: fadeInUp 0.5s ease;
	}

	.letter-header {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.sender-name {
		font-weight: bold;
		color: #ff4081;
	}

	.letter-content {
		font-size: 30rpx;
		color: #444;
		line-height: 1.7;
	}

	/* 发布按钮 */
	.send-btn {
		position: fixed;
		right: 30rpx;
		bottom: 60rpx;
		z-index: 99;
		background: linear-gradient(to right, #ff80ab, #ff4081);
		color: white;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
		animation: bounceIn 0.6s ease;
	}

	/* 动画 */
	@keyframes fadeInUp {
		from {
			transform: translateY(30rpx);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@keyframes bounceIn {
		0% {
			transform: scale(0.6);
			opacity: 0;
		}

		60% {
			transform: scale(1.05);
			opacity: 1;
		}

		100% {
			transform: scale(1);
		}
	}
</style>